﻿<!-- INCLUDE ESSENTIAL SLIDESHOW FILES -->
<link rel="stylesheet" href="~/Content/Home/css/flexslider/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="~/Content/Home/css/flexslider/default.css" type="text/css" media="screen" />
<script src="~/Content/Home/js/jquery.flexslider.min.js"></script>

<!-- FLEXSLIDER CONTAINER -->
<div id="top-slider" class="flexslider-container">
    <div class="flexslider">

        <!-- BEGIN SLIDES -->
        <ul class="slides">
            <li>
                <img src="~/Content/Home/img/slider/1.jpg" alt="" />

                <!-- SLIDE CAPTION -->
                <div class="flex-caption slider-caption">
                    <div class="container">

                        <div class="row">
                            <div class="col-xs-12 col-sm-8 col-lg-6 caption-body hidden-xs">
                                <h1 class="title animated" data-animation="fadeInDownBig">Giảm giá đặc biệt chào đông 2014</h1>
                                <p class="subtitle col-sm-9 animated" data-animation="fadeInUp">Khách hàng được giảm giá 20% khi mua 2 sản phẩm trở lên tại SHOP [...]</p>
                                <div class="clearfix"></div>
                                @*<a href="#" class="btn btn-primary btn-iconed animated" data-animation="fadeIn">
                                        <i class="icon-shopcart"></i>
                                        <span>Mua ngay</span>
                                    </a>*@
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /SLIDE CAPTION -->

            </li>
            <li>
                <img src="~/Content/Home/img/slider/2.jpg" alt="" />

                <!-- SLIDE CAPTION -->
                <div class="flex-caption slider-caption">
                    <div class="container">

                        <div class="row">
                            <div class="col-xs-12 col-sm-4 col-lg-6 caption-body">
                                <h1 class="title animated" data-animation="fadeInRightBig">
                                    Giảm giá<br />
                                    tới <span class="accent-color big-number">20%</span>
                                </h1>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- SLIDE CAPTION -->

            </li>
        </ul>
        <!-- #END SLIDES -->

    </div>
</div>
<!-- /FLEXSLIDER CONTAINER -->
<!-- INITIALIZE SLIDESHOW -->
<script>
    jQuery(function ($) {
        var $slider = $('#top-slider > .flexslider');
        $slider.imagesLoaded(function () {
            $slider.flexslider({
                animation: 'slide',
                easing: 'easeInBack',
                useCSS: false,
                animationSpeed: 1000,
                slideshow: false,
                smoothHeight: true,
                start: function (slider) {
                    // wrap control nav inside container
                    var $controlNav = $slider.find('.flex-control-nav');
                    $controlNav.wrap('<div class="flex-pagination-container" />').wrap('<div class="container" />').wrap('<div class="col-xs-12 col-sm-12" />');
                    $controlNav.fadeIn();

                    center_caption(slider);
                },
                before: function (slider) {
                    // initial caption animation for next show
                    $slider.find('.slides li .animation-done').each(function () {
                        $(this).removeClass('animation-done');
                        var animation = $(this).attr('data-animation');
                        $(this).removeClass(animation);
                    });

                    center_caption(slider)
                    $(window).trigger('resize');
                },
                after: function () {
                    // run caption animation
                    $slider.find('.flex-active-slide .animated').each(function () {
                        var animation = $(this).attr('data-animation');
                        $(this).addClass('animation-done').addClass(animation);
                    });
                    $(window).trigger('resize');
                }
            });
        });

        // vertical align center caption
        function center_caption(slider) {
            $slider.find('li:eq(' + (slider.animatingTo + 1) + ') .caption-body').each(function () {
                var $caption = $(this),
                    captionH = $caption.outerHeight(),
                    // sliderH = $slider.height(),
                    // let's hardcode it
                    sliderH = 480,
                    top = (sliderH - captionH) / 2;

                $caption.css('top', top + 'px');
            });
        }

        $(window).on('throttledresize', function () {
            $slider.find('.flex-active-slide .caption-body').each(function () {
                var $caption = $(this),
                    captionH = $caption.outerHeight(),
                    sliderH = $slider.height(),
                    top = (sliderH - captionH) / 2;

                $caption.css('top', top + 'px');
            });
        });
    });
</script>
